import BaseWidget = require('core/BaseWidget.class');
import Functions = require('core/Functions.module');


export = SideMenu;

class SideMenu extends BaseWidget {
    baseClass = "widgets-side_menu";
    panels: Array<any> = new Array();
    fullpanels: Array<any> = new Array();
    halfpanels: Array<any> = new Array();
    fullpage: any;
    mainContainer: JQuery;
    debug = false;
    toast: any;
    // 此函数在系统初始化完成后会自动调用
    //  所有业务逻辑从此函数开始
    startup() {
        this.start();
        //---zhuboyu----
        this.domObj.find(".widgets-side_menu-footer-foldable-icon").click();
        //zhuboyu-----
    }

    start(config?) {
        this.addToDom({
            root: this.widgetPath,
            media: {
                foldImageURL: this.widgetPath + '/images/fold.png'
            },
            menuListData: this.config.menuListData || this.AppX.appConfig.menuBarWidgets
        });
        this.toast = this.AppX.runtimeConfig.toast;
        this.mainContainer = $(this.AppX.appConfig.mainContainer);
        this.initDomListen();
        this.ready();
        if (this.config.isFold) {
            this.domObj.find('.widgets-side_menu-footer-foldable-icon').data('isfold', true);
            this.domObj.addClass('widgets-side_menu-sidebar-small');
            this.mainContainer.css({
                width: 'calc(100%-50px)',
                left: '50px'
            });
        }
    }

    destroy() {

    }

    initDomListen() {
        var _this = this;
            this.domObj.find(".accordion").accordion({
                collapsible: true,
                active: false,
                heightStyle: "content",
                animate: 150,
                icons: {
                    header: "glyphicon glyphicon-chevron-left",
                    activeHeader: "glyphicon glyphicon-chevron-down"
                }
            });
            this.domObj.on('click', '.fire-on', function (e) {
                _this.itemOnClick(e);
            });
            this.domObj.on('click', '.widgets-side_menu-footer-foldable-icon', function (e) {
                _this.foldable(e);
            });
    }

    // 可折叠
    foldable(e) {
        var currentTarget = $(e.currentTarget);
            var isFold = currentTarget.data('isfold');
            if (isFold === true) {
                this.domObj.removeClass('widgets-side_menu-sidebar-small');
                this.mainContainer.css({
                    width: 'calc(100% - 180px)',// width: 'calc(100% - 250px)',
                    left: '180px'//left: '250px'
                });
            }
            else {
                this.domObj.addClass('widgets-side_menu-sidebar-small');
                this.mainContainer.css({
                    width: 'calc(100% - 50px)',
                    left: '50px'
                });
            }
            currentTarget.data('isfold', !isFold);
            //重置地图容器的宽度
            var scenediv = $(this.config.scenediv);
        	 var scenewidth =$("#mainContainer_horizontal").width()-$("#panel_Container").width();
        	 scenediv.css("width",scenewidth+"px");
    }

    itemOnClick(e?) {
        var target = $(e.currentTarget);
            AppX.WidgetUse.useWidget($(target).attr("data-id"));
    }

    destroyWidget(widgetID) {
        this.domObj.find('.widgets-side_menu-item_header').removeClass('ui-state-active');
            this.panels[widgetID] = null;
            this.fullpanels[widgetID] = null;
            this.halfpanels[widgetID] = null;
            this.log('已销毁对象:ID = ' + widgetID);
    }
    addToDom(data) {
        var htmlString = _.template(this.template)(data);
        this.setHtml(htmlString, 'body');
    };
   
}